<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蜗牛视频</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.css}" type="text/css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2098488_hqzg0si39mm.css" type="text/css">
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>

        function sea(){
           var val= document.getElementById('searchTitle').value
            window.location.href="/?title="+val
        }
        var praise;
        $(document).ready(function () {
            praise=function (id) {
                $.get("/user/great/"+id,function (data) {
                    if (data.code==0){
                        let str='#video'+id
                        $(str).html("点赞:"+data.data)
                    }else{
                        alert("没有登录请登录！")
                        window.location.href="/toLogin"
                    }

                })
            }
        })

    </script>
</head>

<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Normal limitWidth">
<!--    #header 这是id-->
    <div th:replace="header :: #header"></div>
    <div class="v3-app-layout__side">
        <div class="v3-app-layout__side__Normal">
            <div class="v3-app-layout__side__Normal__contentWrapper">
                <div class="v3-app-layout__side__block-top">
                    <a  class="v3-app-layout__side__item" th:classappend="${categoryId}==null?'active':''" href="/"><i
                            class="icon-home"></i><span>首页</span></a>
                </div>
                <div class="v3-app-layout__side__block-channel">
                    <div class="v3-app-layout__side__block-title">特色频道</div>
                    <a  th:each="category:${categories}" class="v3-app-layout__side__item " th:classappend="${category.id}==${categoryId}?'active':''" th:href="@{/index(categoryId=${category.id})}"><i
                            class="icon-cinema"></i><span th:text="${category}==null?'':${category.name}"></span></a>

                </div>
                <div class="v3-app-layout__side__block-user">
                    <div class="v3-app-layout__side__block-title">我的</div>
                    <a class="v3-app-layout__side__item" href="/user/toMyHistory"><i
                            class="icon-history"></i><span>观看历史</span></a><a
                        class="v3-app-layout__side__item" href="/user/toMyFavor"><i
                        class="icon-side_collect"></i><span>我的收藏</span></a>
                </div>
                <div class="v3-app-layout__side__block-agreement">
                    <a href="" target="_blank">关于我们</a><a href="" target="_blank">成为创作者</a><br />
                    <a href="" target="_blank">侵权投诉</a><a href="" target="_blank">用户服务协议</a><br />
                    <a href="" target="_blank">隐私政策</a><a href="" target="_blank">其他政策与协议</a>
                </div>
            </div>
        </div>
    </div>
    <div class="v3-app-layout__content">
        <div class="categoryContent__wrapper">
            <div class="categoryContent categoryPage_home">
                <div
                        class="FeedContainer channelBlocklist channelBlocklist--narrow categoryPage_home__LvideoRecomment">
                    <div class="FeedContainer__content">
                        <div class="FeedContainer__items">
                            <th:block th:each="video,index:${pageInfo?.list}">
                                <div  class="FeedContainer__itemWrapper">
                                    <div  class="VerticalFeedCard VerticalChannelBlockList__item">
                                        <a class="VerticalFeedCard__coverWrapper" th:title="${video.title}"
                                           th:href="'/video/view/'+${video.id}" target="_blank" data-disable_default="true">
                                            <picture>
                                                <source srcSet="" type="image/webp" />
                                                <img class="BU-MagicImage"
                                                     style="width: 100%; height: 100%; transition: transform 0.3s; object-fit: cover"
                                                     th:src="${video.cover}" alt="" /> </picture>
                                        </a><a class="VerticalFeedCard__title" title="" href=""
                                               target="_blank" data-disable_default="true" th:text="'标题:'+${video.title}"></a>
                                        <div class="VerticalFeedCard__bottomInfo" th:text="'类别:'+${video.category.name}"></div>
                                        <div class="VerticalFeedCard__bottomInfo" th:text="'观看次数:'+${video.viewNum}"></div>
                                        <div class="VerticalFeedCard__bottomInfo"><button style="text-align: center" th:id="'video'+${video.id}" th:onclick="'praise('+${video.id}+')'" class="btn btn-info" th:text="'点赞:'+${video.greatNum}"></button></div>

                                    </div>

                                </div>
                                <br th:if="${index.count} mod 5==0"/>
                            </th:block>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>

</html>